<script setup lang="ts">
import { ref, reactive } from 'vue'
import TitleBar from '@/components/common/TitleBar.vue'
import SubPage1 from './SubPage1.vue'
import SubPage2 from './SubPage2.vue'
import SubPage3 from './SubPage3.vue'
const current = ref(1)
</script>

<template>
  <div class="container">
    <title-bar>接入管理</title-bar>
    <div class="main">
      <div class="bar">
        <el-radio-group v-model="current">
          <el-radio-button label="API接入" :value="1" />
          <el-radio-button label="Web接入" :value="2" />
          <el-radio-button label="微信公众号接入" :value="3" />
        </el-radio-group>
      </div>
      <div>
        <template v-if="current === 1">
          <sub-page1 />
        </template>
        <template v-else-if="current === 2">
          <sub-page2 />
        </template>
        <template v-else-if="current === 3">
          <sub-page3 />
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.main {
  padding: 20px;
  margin-left: 100px;
}

.main .bar {
  margin-bottom: 30px;
}
</style>
